<template>
  <!--  leaflet地图 -->
  <div id="map"></div>
  <!-- 信息框组 -->
  <transition name="slide-left">
    <div class="dataBoxList-left" v-show="dataBoxShow">
      <div
        class="dataBox"
        v-for="(data, index) in dataList"
        :key="index"
        v-show="index < 5"
      >
        <div class="title" :style="data.titleStyle">{{ data.title }}</div>
        <div>
          <div
            class="introduction"
            v-for="(text, index) in data.textList"
            :key="index"
            :style="data.textStyle"
          >
            {{ text }}
          </div>
        </div>
      </div>
    </div>
  </transition>

  <transition name="slide-right">
    <div class="dataBoxList-right" v-show="dataBoxShow">
      <div
        class="dataBox"
        v-for="(data, index) in dataList"
        :key="index"
        v-show="index > 4"
      >
        <div class="title" :style="data.titleStyle">{{ data.title }}</div>
        <div>
          <div
            class="introduction"
            v-for="(text, index) in data.textList"
            :key="index"
            :style="data.textStyle"
          >
            {{ text }}
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
/* eslint-disable */
import { getCurrentInstance, onMounted, ref } from "vue";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import "leaflet.echarts-layer";
import "@/api/leaflet-echarts.js";
import "@/api/echarts.source.js";
import * as echart from "echarts";
import pubsub from "pubsub-js";
import "@supermap/iclient-leaflet";

import defaultIcon from "leaflet/dist/images/marker-icon.png";
import chartOptions from "@/api/chartsOption.js";
import 区界取反 from "@/GIS-json/区界取反.json";
import BlockList from "@/GIS-json/产业布局大三区.json";
import BlockList22 from "@/GIS-json/产业区块.json";
import townStreetList from "@/GIS-json/镇街线.json";
import JSdata from "../json/产业区块-导航.json";
import dataList from "@/json/镇街-主导产业.json";
import Imgurl from "@/json/底图url.json";

export default {
  name: "地图",
  data() {
    return {
      data2: JSdata,
      subList: [],
      dataBoxShow: false,
      dataList: [],
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    let map1;
    // 图层列表
    let layerList = [];
    //地图控制
    let mapID = 0;
    // echarts图表
    let chartMap;
    // 轮播标识下标
    let i = 0;
    // 地图面要素列表（三大产业区、镇街产业布局）
    let polygonList;
    // 图表配置列表
    let optionList = [
      chartOptions["图表地图-镇街"],
      chartOptions["图表地图-区块"],
    ];
    // 定时器
    let interval;

    onMounted(() => {
      // 初始化地图对象
      initMap();
      polygonList = MapLayerMaker();
      proxy.dataList = dataList;

      // pubsub订阅列表
      subscribeList();
      // 开启地图切换定时器
      rotationMap();
    });

    // 初始化地图
    function initMap() {
      // 地图初始化,1
      map1 = L.map("map", {
        preferCanvas: true, // 制图canvas优先显示
        attributionControl: false, // 隐藏信息控件
        zoomControl: false, // 隐藏缩放控件
        maxZoom: 13,
        minZoom: 11,
      });
      map1.dragging.disable();

      // 地图视图定位
      map1.setView([22.72, 113.51], 11);

      // 添加深色底图为初始底图
      L.tileLayer(Imgurl[1].url).addTo(map1);

      // 图标初始化
      let size = 25;
      const DefaultIcon = L.icon({
        iconUrl: defaultIcon,
        iconSize: [size, size],
      });
      L.Marker.prototype.options.icon = DefaultIcon;

      // 添加掩膜
      addMask();

      map1.on("click", (e) => {
        console.log(e.latlng);
      });
    }

    // 添加区界掩膜
    function addMask() {
      // 坐标XY转置
      区界取反.features[0].geometry.rings.forEach((element) => {
        let rings = [];
        element.forEach((e) => {
          if (e[0] > 100) {
            rings.push(e.reverse());
          } else {
            rings.push(e);
          }
        });
        // 绘制面要素
        L.polygon(rings, {
          color: "rgba(18, 33, 43, 0.9)",
          weight: 0,
          fillOpacity: 0.95,
          opacity: 1,
        }).addTo(map1);
      });
    }

    // 地图轮播
    function rotationMap() {
      // 设置初始的定时轮播
      interval = setInterval(setMapTimeout(), 5000);
    }

    // 地图轮播处理器
    function setMapTimeout() {
      // 去除旧面要素
      if (layerList.length != 0) {
        layerList.forEach((element) => {
          map1.removeLayer(element);
        });
      }
      // 去除旧图表地图
      if (chartMap != undefined) {
        chartMap.dispose();
      }
      proxy.dataBoxShow = !proxy.dataBoxShow;
      // 读取新面要素
      layerList = polygonList[mapID];
      // 读取新图表地图
      chartMap = drawEcharts(optionList[mapID]);
      // 加载新面要素

      if (layerList.length != 0) {
        layerList.forEach((element) => {
          element.addTo(map1);
        });
      }
      // 下标进一
      mapID === 0 ? mapID++ : (mapID = 0);
      return setMapTimeout;
    }

    // 绘制全部面要素
    function MapLayerMaker() {
      let list = [drawTownStreet(), draw3Block()];
      return list;
    }

    // 绘制三大产业区
    function draw3Block() {
      let list = [];
      // 颜色列表
      let colorList = [
        "rgb(227, 1, 25)",
        "rgb(227, 90, 1)",
        "rgb(0, 104, 231)",
      ];
      // 绘制
      for (let index = 0; index < colorList.length; index++) {
        // 绘制白色边框
        list.push(
          addPolygon(BlockList.features[index], "rgb(255,255,255)", 0.1, 8)
        );
        // 绘制区块
        list.push(
          addPolygon(BlockList.features[index], colorList[index], 0.5, 3)
        );
      }
      return list;
    }

    // 绘制22产园区
    function draw22Block() {
      let list = [];
      // 颜色列表
      // 绘制
      for (let index = 0; index < 22; index++) {
        // 绘制边框
        list.push(
          addPolygon2(
            BlockList22.features[index],
            "rgb(181,203,158)",
            1,
            1.5,
            "transparent",
            index
          )
        );
      }
      return list;
    }

    // 绘制镇街界线
    function drawTownStreet() {
      console.log(townStreetList);
      let list = [];
      // 颜色列表
      let colorList = [
        "rgb(227, 1, 25)",
        "rgb(227, 90, 1)",
        "rgb(0, 104, 231)",
        "rgb(1, 227, 203)",
        "rgb(1, 227, 90)",
        "rgb(90, 1, 227)",
        "rgb(203, 1, 227)",
        "rgb(227, 203, 1)",
        "rgb(115, 192, 222)",
      ];
      // 绘制
      for (let index = 0; index < colorList.length; index++) {
        // 绘制白色边框
        list.push(
          addPolygon(townStreetList.features[index], "rgb(255,255,255)", 0.1, 8)
        );
        // 绘制区块
        list.push(
          addPolygon(townStreetList.features[index], colorList[index], 0.5, 3)
        );
      }
      return list;
    }

    // 坐标转置
    function positionReverse(data) {
      let list = [];
      data.forEach((element) => {
        element[0] > 100 ? list.push(element.reverse()) : list.push(element);
      });
      return list;
    }

    //  pubsub订阅
    function subscribeList() {
      proxy.subList.push(
        pubsub.subscribe("routerChange", (n, data) => {
          // 去除旧图表地图
          if (chartMap != undefined) {
            chartMap.dispose();
          }
          clearInterval(interval);
        })
      );
    }

    // 添加面要素
    function addPolygon(element, color, opacity, border, fillColor = color) {
      let layer;
      element.geometry.rings.forEach((ring) => {
        // 坐标微调
        let rings = [];
        ring.forEach((point) => {
          rings.push([point[1] - 0.003, point[0] + 0.005]);
        });
        // 绘制面要素
        layer = L.polygon(rings, {
          color: color,
          fillOpacity: opacity ? opacity : 1,
          weight: border ? border : 0,
          opacity: 1,
          fillColor: fillColor,
        });
      });
      return layer;
    }

    // 添加面要素同时绑定鼠标事件
    function addPolygon2(
      element,
      color,
      opacity,
      border,
      fillColor = color,
      index
    ) {
      let layer;
      element.geometry.rings.forEach((ring) => {
        // 坐标微调
        let rings = [];
        ring.forEach((point) => {
          rings.push([point[1] - 0.003, point[0] + 0.005]);
        });
        // 绘制面要素
        layer = L.polygon(rings, {
          color: color,
          fillOpacity: opacity ? opacity : 1,
          weight: border ? border : 0,
          opacity: 1,
          fillColor: fillColor,
        });
        //添加信息弹窗
        var polygonProperties = {
          id: index,
          name: JSdata[index]["name"],
          area: JSdata[index]["area"],
          master: JSdata[index]["master"],
        };
        layer.bindPopup(
          '<div style="margin: 0.5% 1.5% 0.5% 1.5%;  display: flex;width: 100%;flex-direction: column;justify-content: space-between;">' +
            '<div style="        display: flex;        justify-content: center;        align-items: center;        background-color: rgba(127, 222, 222,0.8);        border-radius: 5px;        font-size: 1em;        font-weight: bolder;        position: relative;        white-space: nowrap;         text-overflow: ellipsis;         flex-basis: 20%;         margin-bottom: 2%;">' +
            polygonProperties.name +
            "</div>" +
            '<div style="         background-color: rgba(127, 222, 222,0.5);        border-radius: 5px;        font-size: 0.9em; ">' +
            "<p><strong>面积:</strong> " +
            polygonProperties.area +
            " 公顷</p>" +
            "<p><strong>产业:</strong> " +
            polygonProperties.master +
            "</p>" +
            "</div>" +
            "</div>"
        );
      });
      return layer;
    }

    //绘制图表地图
    function drawEcharts(option) {
      var overlay = new L.echartsLayer(map1, echarts);
      var chartsContainer = overlay.getEchartsContainer();
      var myChart = overlay.initECharts(chartsContainer);
      window.onresize = myChart.onresize;
      overlay.setOption(option);
      return myChart;
    }

    return { chartMap };
  },
  beforeRouteLeave() {
    this.chartMap.dispose();
    console.log(chartMap);
  },
  beforeUnmount() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
* {
  overflow: hidden;
}
#map {
  width: 100%;
  height: 100%;
}

.dataBoxList-left {
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 999;
  height: 100%;
}

.dataBoxList-right {
  position: absolute;
  top: 0%;
  right: 2%;
  z-index: 999;
  height: 100%;
  transition: width 0.5s ease-in;
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.5s;
}
.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(-100%);
}
.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(102%);
}

.dataBox {
  color: white;
  margin-bottom: 10%;
  border-radius: 7px;
  > .title {
    font-weight: bold;
    font-size: 150%;
    padding: 5px 50px;
  }
  > div {
    > .introduction {
      font-size: 120%;
      text-align: center;
      padding: 3%;
    }
  }
}

#custom-popup {
  margin: 0.5% 1.5% 0.5% 1.5%;
  display: flex;
  width: 30%;
  height: 11%;
  flex-direction: column; /* 使子元素垂直排列 */
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.custom-popup .popup-header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(127, 222, 222, 0.8);
  border-radius: 5px;
  font-size: 0.8em;
  color: aliceblue;
  font-weight: bolder;
  position: relative;
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 显示省略符号 */
}

.custom-popup .popup-body p {
  margin: 0 0 5px 0;
}

/* 连接线样式 */
.custom-popup:after {
  content: "";
  position: absolute;
  border-style: solid;
  border-color: transparent;
  border-width: 10px; /* 调整大小 */
  top: 100%;
  left: 50%;
  margin-left: -10px; /* 调整位置 */
  border-top-color: white; /* 与弹出窗口背景色相同 */
}
.leaflet-popup-content-wrapper {
  background: transparent; /* 使背景透明 */
  border: none; /* 移除边框 */
  color: #fff; /* 修改文本颜色 */
  /* 添加其他自定义样式 */
}
</style>